<template>
	<view class="uni-swiper-page">
		<view class="title">Tab View {{ pid}}</view>
		<scroll-view
			:class="[anit&&'anit','swiper-scroll']"
			scroll-y="true"
			:enable-flex="true"
			scroll-with-animation
			:lower-threshold="80"
			:refresher-threshold="60"
			:refresher-triggered="refreStatus"
			:refresher-enabled="refresher"
			:swiper-item="pid"
			@refresherpulling="refresherpulling"
			@refresherrefresh="refresherrefresh"
			@refresherrestore="refresherrestore"
			@scrolltolower="scrolltolower"
		>
			<view class="pannel" v-for="(item,index2) in data" :key="index2">
				<view class="swiper-item-list">{{ item.key }} - {{ item.id }} - {{ item.name }}</view>
			</view>
			<!-- <view v-if="isLoading||finish" class="bottom">{{LoadText}}</view> -->
			<view class="bottom">
				<uni-load-more iconType="snow" :status="status" color="#999" :iconSize="18"/>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			pid: {
				type: [Number, String],
				default: ''
			},
			action: {
				type: Function,
				default: ()=>{}
			},
			refresher: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				refreStatus: false,
				enabled: true,
				anit: true,

				data:[],
				dataList: [],
				isLoading: false,
				LoadText: '正在加载···',
				finish: false,
				size: 15,
				page: 1
			}
		},
		computed:{
			status(){
				let statusType = this.isLoading ? 'loading' : 'more'
				statusType = this.finish ? 'noMore' : statusType
				return statusType
			}
		},
		methods: {
			refresherpulling(e){
				this.anit = false
			},
			refresherrestore(e){
				setTimeout(function(){
					this.anit = false
				}, 200)
			},
			
			// 下拉事件
			async refresherrefresh(e){
				if(this.isLoading) return
				console.log(72,'下拉事件')
				this.refreStatus = true;
				await this.initData()
				this.refreStatus = false;
				e.stopPropagation()
			},
			// scrolltolower触底
			scrolltolower() {
				if(this.isLoading) return
				console.log(77,'scrolltolower触底')
				this.moreList()
			},
			async initData(data={}){
				this.finish = false
				this.loadingText = "加载中..."
				this.page = 1
				await this.getList(data);
				this.data = this.dataList
				uni.stopPullDownRefresh();
			},
			async moreList(){
				if(this.finish) return
				console.log("滚动加载更多 onReachBottom");
				this.page ++
				await this.getList();
				this.data = this.data.concat(this.dataList)
			},
			async getList() {
				if(this.isLoading) return
				this.isLoading = true;
				this.anit = true
				this.LoadText = '正在加载···'
				const params = {
					test: '传入的测试数据'
				}
                const res = await this.action(this.page, this.size, params, 42)
                // const res = await  {data:[]}
				console.log('this.action',res)

                this.dataList = res.data
				this.finish = this.checkFinish(res.data)
				if(this.finish) {
					this.LoadText = '没有更多了'
				}
				this.isLoading = false;
            },
			checkFinish(data){
				return (!data.length||data.length<this.size)
			},

			loadData() {
				// 首次激活时被调用
				console.log(this.pid,'首次激活时被调用')
				// this.initData()
				this.refreStatus = true
			},
			clear() {
				// 释放数据时被调用，参考 swiper-list 缓存配置
				this.dataList.length = 0;
				this.data.length = 0;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-swiper-page {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		height: 100%;
	}
	.swiper-scroll {
		height: 100%;
		flex: 1;
		overflow: hidden;
	}
	.anit /deep/ .uni-scroll-view-refresher{
		transition: height .2s;
	}
	
	.pannel{
		padding: 20rpx 0;
	}
	.swiper-item-list {
		padding: 30rpx;
		margin: 0 20rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 16rpx rgba($color: #000000, $alpha: .05);
	}
	.title{
		background: #fff;
		padding: 30rpx;
		font-size: 32rpx;
		border-bottom: 1rpx solid #eee;
		border-top: 1rpx solid #f8f8f8;
	}
	.bottom{
		text-align: center;
		padding: 20rpx 0 30rpx;
	}
</style>
